<template>
  <router-view></router-view>
  <van-tabbar
    v-model="active"
    route
    active-color="#36b4ea"
    inactive-color="#878B97"
    :border="false"
    safe-area-inset-bottom
    fixed
    z-index="1002"
    v-if="isShow"
  >
    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/node" icon="cluster-o">社区</van-tabbar-item>
    <van-tabbar-item to="/strategy" icon="apps-o">策略</van-tabbar-item>
    <van-tabbar-item to="/actical" icon="flower-o">商学院</van-tabbar-item>
    <van-tabbar-item to="/capital" icon="paid">资产</van-tabbar-item>
  </van-tabbar>
  <div
    v-if="isShow"
    style="
      height: calc(60px + constant(safe-area-inset-bottom));
      height: calc(60px + env(safe-area-inset-bottom));
      background-color: #fff;
    "
  ></div>
</template>
    
<script setup lang='ts'>
import { computed, reactive, ref } from "vue";
import { useRoute } from "vue-router";
const active = ref(0);
const route = useRoute();
const isShow = computed(() => {
  return route.fullPath.split("/").length < 3;
});
</script>
    
<style lang="scss" scoped>
</style>